import React, { useState, useEffect } from "react";
import { connect } from "dva";
import { Input, Spin, Modal, Icon, Form, Row, Col, Radio, Checkbox, } from "antd";
import styles from "./index.less";

const AddGroup = ({ visible, dispatch, form, currentUser, editGroup }) => {
	const [loading, setLoading] = useState();
	const formItemLayout = {
		labelCol: {
			xs: { span: 24 },
			sm: { span: 6 },
		},
		wrapperCol: {
			xs: { span: 24 },
			sm: { span: 18 },
		},
	};
	const tailFormItemLayout = {
		wrapperCol: {
			xs: { span: 24, offset: 0, },
			sm: { span: 18, offset: 6, },
		},
	};
	const hide = () => {
		dispatch({
			type: "onlineSkillSet/showAddGroup",
			payload: {
				visible: false,
				editGroup: null,
			},
		});
	};

	const { getFieldDecorator } = form;

	const handleSubmit = (e) => {
		e.preventDefault();
		form.validateFields((err, values) => {
			if (!err) {
				setLoading(true);
				dispatch({
					type: "onlineSkillSet/addGroup",
					payload: {
						...values,
						userId: currentUser.id,
						id: editGroup?.id,
						oldCustomer: values.oldCustomer ? 1 : 0,
					},
					callback: () => {
						setLoading(false);
						hide();
					},
				});
			}
		});
	};

	useEffect(() => {
		if (editGroup) {
			form.setFieldsValue({
				groupName: editGroup.groupName,
				oldCustomer: editGroup.oldCustomer ? 1 : 0,
				distributeModeSession: editGroup.distributeModeSession.toString(),
				distributeModeLeave: editGroup.distributeModeLeave.toString(),
			});
		}
	}, [editGroup]);

	return (
		<Modal title='添加/编辑在线技能组' visible={visible} onCancel={hide} onOk={handleSubmit} okButtonProps={{ loading }} destroyOnClose>
			<Form {...formItemLayout}>
				<Form.Item label='技能组名称'>
					{getFieldDecorator("groupName", {
						rules: [{ required: true, message: "请输入技能组名称", },],
					})(<Input />)}
				</Form.Item>
				<Form.Item label='会话分配模式'>
					{getFieldDecorator("distributeModeSession", {
						rules: [{ required: true, message: "请选择会话分配模式", },],
					})(
						<Radio.Group>
							<Radio value='1'>智能分配</Radio>
							<Radio value='2'>等量分配</Radio>
							<Radio value='3'>按忙碌程度分配</Radio>
						</Radio.Group>
					)}
				</Form.Item>
				<Form.Item {...tailFormItemLayout}>
					{getFieldDecorator("oldCustomer", { valuePropName: "checked", })(<Checkbox>熟客优先</Checkbox>)}
				</Form.Item>
				<Form.Item label='留言分配模式'>
					{getFieldDecorator("distributeModeLeave", {
						rules: [{ required: true, message: "请选择留言分配模式", },],
					})(
						<Radio.Group>
							<Radio value='1'>等量分配</Radio>
							<Radio value='2'>全组处理</Radio>
						</Radio.Group>
					)}
				</Form.Item>
			</Form>
		</Modal>
	);
};

export default connect(({ onlineSkillSet, user }) => ({
	...onlineSkillSet,
	currentUser: user.currentUser,
}))(Form.create()(AddGroup));
